import React, { useContext } from 'react'
import { Form, Checkbox, TreeSelect, Input, Button, Select } from 'antd'
import style from './style.module.less'
import { messageSettingsContext } from '../../context'
import CKEditor from '@/components/CKEditor'

const { SHOW_PARENT } = TreeSelect
export default () => {
  const { messagePushConfig } = useContext(messageSettingsContext)
  const { getTreeSelect } = messagePushConfig // 获取接收人数组

  const treeData = messagePushConfig.three // 重洗之后的接收人数据结构

  const tProps = {
    treeData,
    onChange: getTreeSelect,
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    style: {
      width: '320px',
      marginLeft: 14,
    },
  }

  return (
    <div className={style.messagePush}>
      <div className={style.top}>
        <div className={style.leftForm}>
          <Form form={messagePushConfig.form}>
            <Form.Item label='模板选择' name='moban' labelAlign='left'>
              <Select
                showSearch
                optionFilterProp='children'
                onChange={messagePushConfig.getTemplate}
                style={{ width: 320 }}
                filterOption={(input: any, option: any) =>
                  (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                }
                options={messagePushConfig.templateSelect}
              />
            </Form.Item>

            <Form.Item label='推送方式' name='tuisong' labelAlign='left'>
              <Checkbox.Group onChange={messagePushConfig.getPushMethod} style={{ width: 320 }}>
                <Checkbox value='1'>邮件</Checkbox>
                {/* <Checkbox value='2'>平台</Checkbox> */}
                <Checkbox value='3'>短信</Checkbox>
              </Checkbox.Group>
            </Form.Item>

            <Form.Item
              // initialValue={messagePushConfig.contentDatas.title}
              label='推送标题'
              name='title'
              labelAlign='left'
            >
              <Input onChange={messagePushConfig.getPushTitle} style={{ width: 320 }} />
            </Form.Item>

            <Form.Item label='接收人' name='jieshouren' labelAlign='left'>
              <TreeSelect {...tProps} />
            </Form.Item>

            <Form.Item label='推送内容' labelAlign='left'></Form.Item>
            <div className={style.eduit}>
              <div className={style.center}>
                <div className={style.centerEditor}>
                  <CKEditor onChange={messagePushConfig.getEditorValue} value={messagePushConfig.pushContent} />
                </div>
                <div className={style.buttonBoxDiv}>
                  {/* <div style={{ width: 88, height: 32 }}></div> */}
                  <Button type='primary' onClick={messagePushConfig.affifmEnter}>
                    确认发送
                  </Button>
                  {/* <div>
                    <Checkbox.Group onChange={messagePushConfig.whetherTemplate}>
                      <Checkbox value='sms'>存为模板</Checkbox>
                    </Checkbox.Group>
                  </div> */}
                </div>
              </div>
            </div>
          </Form>
        </div>
      </div>
    </div>
  )
}
